<template>
	<div class="mb20">
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">本月入账保费</h6>
            <div class="flex_c_c">20,000</div>
          </el-card>
        </el-col>
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">本月实收保费</h6>
            <div class="flex_c_c">20,000</div>
          </el-card>
        </el-col>
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">本月入账保费实收率</h6>
            <div class="flex_c_c">89%</div>
          </el-card>
        </el-col>
      </el-row>
      <div class="mt20">
        <div id="monthlyPremiumYield" style="width: 100%; height:400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="monthlyPremiumYield">
  import * as echarts from 'echarts';
  import { onMounted } from 'vue';

  nextTick(() => {
    let chartDom = document.getElementById('monthlyPremiumYield');
    let myChart = echarts.init(chartDom);
    let option;

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    option = {
      title: {
        text: '入账保费实收率'
      },
      color: colors,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        right: '20%'
      },
      legend: {
        data: ['入账保费', '实收保费', '入账保费实收率']
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: ['2023年1月', '2023年2月', '2023年3月', '2023年4月', '2023年5月', '2023年6月', '2023年7月', '2023年8月', '2023年9月', '2023年10月', '2023年11月', '2023年12月', ],
          axisLabel: {
            rotate: 45
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          position: 'left',
          alignTicks: true,
          axisLine: {
            show: true,
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '',
          position: 'right',
          alignTicks: true,
          axisLine: {
            show: true,
          },
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '入账保费',
          type: 'bar',
          data: [
            302, 210, 310, 206, 594, 342, 274, 244, 351, 437, 465, 570
          ]
        },
        {
          name: '实收保费',
          type: 'bar',
          data: [
            381, 344, 252, 256, 312, 318, 294, 587, 560, 392, 436, 370
          ]
        },
        {
          name: '入账保费实收率',
          type: 'line',
          yAxisIndex: 1,
          data: [89, 77, 69, 36, 63, 69, 85, 87, 90, 95, 88, 91]
        }
      ]
    };

    option && myChart.setOption(option);
  })
</script>

<style lang="scss" scoped>

</style>